var CPUXYS = [{X: 0 , Y: -36},{X: 13 , Y: -33},{X: 25 , Y: -25},{X: 33,  Y: -14},{X: 36,  Y: 0},{X: 32,  Y: 13},{X: 25,  Y: 25},{X: 13 , Y: 33},{X: 0 , Y: 36},{X: -14 , Y: 33},{X: -25 , Y: 25},{X: -33 , Y: 13},{X: -36 , Y: 0},{X: -33 , Y: -14},{X: -25 , Y: -25},{X: -13 , Y: -33}]
var context = null;//全局变量 画布这个对象 画东西用
// 	保存画布上所有的对象
var circles = [];
var circles2 = [];
// 	画布原有的对象
var oldCircles = [];
var oldCircles2 = [];
//	画布上的线的对象
var lineObjs = [];
//	画布上所有的图片
var imgs = [];
//鼠标点击 如果选中一个元素 这个就是选中的那个元素
var previousSelectedCircle;
//选中的元素的初始位置
var chooseObjInitPlace = {};
// 这时需要判断有没有连线连在这个元素上
var dragLines1 = [];
// 这时需要判断有没有连线连在这个元素上
var dragLines2 = [];
//是否在拖拽
var isDragging = false;
//鼠标放开了 判断一下落点是否有元素 如果有元素 拖动的元素归位 并且连线
var lineObj = null;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的开始的元素
var previousSelectedCircleStartLine;
// 画线的时候 鼠标点击 如果选中一个元素 这个就是选中的那个元素 画线的结束的元素
var previousSelectedCircleEndLine;
// 画布上所有的一级
var canvasAllLevel1 = [];
// 画布上所有的二级
var canvasAllLevel2 = [];
// 画布上所有的三级
var canvasAllLevel3 = [];
// 画布上所有的四级
var canvasAllLevel4 = [];
//画布类型 如果是1 代表一级为主机 二级为板卡 如果是2 代表一级为板卡 二级为处理单元
var canvasType = 1;
//拖拽的那个元素是否是初始化中的元素
var canvasIsInitDom = true;
//拖拽的元素的级别
var canvasTuoLevel = 0;
//拖拽二级元素的时候 记录耳机元素原始位置
var canvasAllLevel2OldObj = null;
var doubleFlag = true;
/**
 *	初始化画布
 *	参数: 宽 高
 *	x , y
 *	data.width , data.height
 *	data.x , data.y
 *	type : 画布类型
 *	fun1 : 连线时候的回调
 *	fun2 : 断开连线时候的回调
 **/
var canvasInitData = {};
function init_canvas(data ,type , fun1 , fun2,fun3,fun4,fun5,fun6,fun7){
    canvasType = type;
    $("body").append('<canvas style="position: absolute; top: ' + data.y + 'px;left : ' + data.x + 'px;" id="myCanvas" height="'+data.height+'"  width="'+data.width+'"></canvas>');
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    var funObj = {fun1:fun1,fun2:fun2,fun3:fun3,fun4:fun4,fun5:fun5,fun6:fun6,fun7:fun7};
    $(canvas).bind('mousedown', canvasClick);
    $(canvas).bind('click',funObj, canvasMouseClick);

    $(canvas).bind('mousedown',funObj, canvasLevel3Click);
    $(canvas).bind('mouseup' , funObj , outMouseDragging);
    $(canvas).bind('mouseout' , funObj , outMouseDragging);
    $(canvas).bind('mousemove' , dragCircle);
    $(canvas).bind('dblclick' , funObj , canvasDbClick);
    $(canvas).bind('dblclick' , funObj , appDbClick);
    canvasInitData.data = data;
    canvasInitData.fun1 = fun1;
    canvasInitData.fun2 = fun2;
    if(canvasType == 1){
        //一级为主机
        var initData = new Array();
        for(var i = 0 ; i < circlesData1.length ; i++){
            var obj = circlesData1[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            initData.push(newObj);
        }
        circles = initData;
    }else if(canvasType == 2){
        //一级为板卡
        var initData = new Array();
        for(var i = 0 ; i < circlesData2.length ; i++){
            var obj = circlesData2[i];
            var newObj = {};
            newObj.x = obj.x;
            newObj.y = obj.y;
            newObj.width = obj.width;
            newObj.height = obj.height;
            newObj.img = obj.img;
            newObj.level = obj.level;
            newObj.text = obj.text;
            initData.push(newObj);
        }
        circles = initData;
    }
    drawCircles();
}
/**
 *	对画板上的对象重新操作后 进行重绘的方法
 */
function drawCircles() {
    // 清除画布，准备绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
	context.fillStyle = "#f8f8f8";
	context.fillRect =(0, 0, canvas.width, canvas.height);


    // 遍历所有对象
    for(var i=0; i<circles.length; i++) {
        var circle = circles[i];
        // 绘制对象
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
        }else if(circle.text != null){
            drawOneFont(circle);
        }else{
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.app.name!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect(circle);
        }
        context.strokeStyle = "#eeeeee";
        context.lineWidth = 0;
        context.setLineDash([1,0]);
      //  context.fill();
        context.stroke();   
        }

    // 遍历所有一级 还有title和count
  for(var i=0; i<circles2.length; i++) {
        var circle = circles2[i];
        context.beginPath();
        if(circle.img != null){
            drawOneImage(circle.img , circle.x, circle.y,circle.width , circle.height);
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
        }else if(circle.text != null){
            drawOneFont(circle);
        }else{
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            context.rect(circle.x,circle.y ,circle.width , circle.height);
        }
        if(circle.app.name!=null) {
            context.fillStyle = "#eeeeee";
            context.strokeStyle = "black";
            drawOneRect(circle);
        }
        context.strokeStyle = "#eeeeee";
        context.lineWidth = 0;
        context.setLineDash([1,0]);
      //  context.fill();
        context.stroke();   
    }
    //遍历所有线的对象
    for(var i=0; i<lineObjs.length; i++) {
        var lineObj = lineObjs[i];
        // 绘制线
        DrawLine(lineObj.obj1 , lineObj.obj2 , lineObj.count , context);
    }
    //十字画线的时候 执行画线
    if(drawLineObj != null && drawLineObj.startx!=null){
        DrawLine2(drawLineObj , context);
    }
}

/**
 *	画一个一级元素   需要带title count
 */
function drawOneRect(circle){

    context.rect(circle.x,circle.y ,circle.width , circle.height);

    context.lineWidth = 0;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#FFFFFF";
    context.fillText(circle.app.name, circle.x+10, circle.y+circle.height+15)
}
/**
 *	写文字
 */
function drawOneFont(circle){
    //设置样式
	 context.lineWidth = 2;
    context.font = "14px Microsoft YaHei";
    context.fillStyle = "black";
    context.strokeStyle = "#F5270B";
    context.fillText(circle.text, circle.x, circle.y)
}
/**
 *右键菜单
 */
    //判断右键的时候 是否选中一个元素
var copyObj = null;
//复制的元素的属性
var copyObj2 = {};
//点击右键的时候 记录鼠标的位置
var mouseXY = {};
function canvasLevel3Click(e){

    var type=e.which;
    if(type!=3){
        return false;
    }else{

        // 取得画布上被单击的点
        var clickX = e.pageX - canvas.offsetLeft;
        var clickY = e.pageY - canvas.offsetTop;

        mouseXY.x = clickX;
        mouseXY.y = clickY;
        //右键弹窗
        $("#rightKey").css({left:(340+clickX)+"px",top:(150+clickY)+"px"});
        $("#rightKey").show();
        e.stopPropagation();
        // 查找被单击的對象
        for(var i = 0 ; i < circles2.length; i++) {
            var circle = circles2[i];
            if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
                //选中了这个元素
                if(e.data.fun5) {
                    //说明点到图了
                    copyObj = circle;
                    e.data.fun5(circle);
                }
                break;
            }
        }
    }
}
//复制
function copy(){
    if(copyObj==null){copyObj2 = null ; return false;}
    copyObj2.width=copyObj.width;
    copyObj2.height=copyObj.height;
    copyObj2.img=copyObj.img;
    copyObj2.id=copyObj.id;
    $("#rightKey").hide();
}

//黏贴
function past(){
    if(copyObj2==null){return false;}
    var newObj={x:mouseXY.x,y:mouseXY.y,width:copyObj2.width,height:copyObj2.height,id:copyObj2.id,img:copyObj2.img};
    circles.push(newObj);

    copyObj2 = null;
    copyObj = null;
    drawCircles();
    $("#rightKey").hide();
}
/**
 *画布双击,查询是否点击的app
 */
function appDbClick(e){
	doubleFlag = false;
	$(".editPOP").hide();
	$("#bottom2").hide();
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
    //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
    for(var i = 0 ; i < circles2.length ; i++){
        var circle = circles2[i];
        //代表 我鼠标双击的位置 是在图片范围内
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            if(e.data.fun4) {
                //说明点到图了
                e.data.fun4(circle);
            }
            break;
        }
    }
   setTimeout(function(){
    	doubleFlag = true;
    },2000);
	  
   
}

/**
 * 	画布双击 查询是否有点击的连线
 *  
 */
function canvasDbClick(e){
	$(".editPOP").hide();
	$("#bottom2").hide();
	// 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    //遍历所有线的对象 查询 x y 坐标在双击时 鼠标的位置
    for(var i = 0 ; i < lineObjs.length ; i++){
        var obj1 = lineObjs[i].obj1;
        var obj2 = lineObjs[i].obj2;
        var x1 = obj1.x;
        var x2 = obj2.x;
        var y1 = obj1.y;
        var y2 = obj2.y;
        var bigY = y2>y1?y2:y1;
    	var smallY = y2<y1?y2:y1;
    	var bigX = x2>x1?x2:x1;
    	var smallX = x2<x1?x2:x1;
    	if(clickX<bigX+5&&clickX>smallX-5&&clickY<bigY+5&&clickY>smallY-5){
    		if((x2==x1||y2==y1)||(Math.abs(x1-x2)<10||Math.abs(y1-y2)<10)){
    			//点到线了
    			  if (e.data.fun3) {
                    //说明点到线了
                	var linkObj;
                	for(var j=0;j<lineObjs.length;j++){
                		if(lineObjs[i].obj1.id==obj1.id){
                			if(lineObjs[i].obj2.id==obj2.id){
                				linkObj = lineObjs[i];
                			}
                		}else if(lineObjs[i].obj1.id==obj2.id){
                			if(lineObjs[i].obj2.id==obj1.id){
                				linkObj = lineObjs[i];
                			}
                		}
                	}
                    e.data.fun3(obj1,obj2,linkObj);
                    break;
	            }
            }else{
            	var k = (y2-y1)/(x2-x1);
            	var b = y2-k*x2;
            	var curY = clickX * k + b;
            	if(clickY>curY-10&&clickY<curY+5){
            		//点到线了
            		if (e.data.fun3) {
                        //说明点到线了
                    	var linkObj;
                    	for(var j=0;j<lineObjs.length;j++){
                    		if(lineObjs[i].obj1.id==obj1.id){
                    			if(lineObjs[i].obj2.id==obj2.id){
                    				linkObj = lineObjs[i];
                    			}
                    		}else if(lineObjs[i].obj1.id==obj2.id){
                    			if(lineObjs[i].obj2.id==obj1.id){
                    				linkObj = lineObjs[i];
                    			}
                    		}
                    	}
                        e.data.fun3(obj1,obj2,linkObj);
                        break;
    	            }
            	}
            }
    	}
    }
}
/**
 *	画一张图片 这张图片如果是未加载的 等待加载后 加入到内存中
 */
function drawOneImage(imgSrc , x , y , width , height , fun){
    if(imgs[imgSrc]==null){
        var img = new Image()
        img.src = imgSrc;
        img.onload = function(){
            imgs[imgSrc] = img;
            context.drawImage(img, x, y,width,height);
        }
    } else {
        context.drawImage(imgs[imgSrc], x, y,width,height);
    }
    if(fun){
        fun();
    }
}
/**
 *	是鼠标单击
 */
function canvasMouseClick(e){
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    var isCancelChoose = false;
    var isChooseOne = false;
    if(mouseInitX >= clickX-5 && mouseInitX <= clickX+5 && mouseInitY >= clickY-5&& mouseInitY <= clickY+5){
        for(var i = 0 ; i < circles2.length; i++) {
            var circle = circles2[i];
            if (clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height) {
            	
            
            	 if(circle.app){
                 	setTimeout(function(){
                 		if(doubleFlag){
                 			var imgSrc=circle.app.icon;
                 			$("#bottom2").show();
                         	$("#icon2").attr("src",imgSrc);
                         	$("#appName2").val(circle.app.name);
                         	$("#appVersion2").val(circle.app.version);
                         	$("#appRemark2").val(circle.app.remark);
                         	if(imgSrc=="./images/llinkbindors/system_update.png"){
                        		$("#appIcon11122").val("1");
                        	}else if(imgSrc=="./images/llinkbindors/sync.png"){
                        		$("#appIcon11122").val("2");
                        	}else if(imgSrc=="./images/llinkbindors/browser.png"){
                        		$("#appIcon11122").val("3");
                        	}else if(imgSrc=="./images/llinkbindors/backup.png"){
                        		$("#appIcon11122").val("4");
                        	}else if(imgSrc=="./images/llinkbindors/calculator.png"){
                        		$("#appIcon11122").val("5");
                        	}else if(imgSrc=="./images/llinkbindors/profile_switcher.png"){
                        		$("#appIcon11122").val("6");
                        	}else if(imgSrc=="./images/llinkbindors/recorder.png"){
                        		$("#appIcon11122").val("7");
                        	}else if(imgSrc=="./images/llinkbindors/weather.png"){
                        		$("#appIcon11122").val("8");
                        	}
                 		}
                 	},200);

                 }
            	 if(e.data.fun6){
            		 e.data.fun6(circle);
            	 }
                break;
            }
        }
    }

}
/**
 *	点击画布 查找有无选中的对象
 *
 */
var mouseInitX = 0;
var mouseInitY = 0;
function canvasClick(e) {
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    mouseInitX = clickX;
    mouseInitY = clickY;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < circles.length; i++) {
        var circle = circles[i];
        initDomPlace(circles , i);
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
           
            if(circle.text !=null){
                isChooseOneObj = false;
            }
        }

        // 判断这个点是否在对象中
        if(isChooseOneObj){
            // 清除之前选择的对象
            previousSelectedCircle = circle;
            canvasTuoLevel = previousSelectedCircle.level;
            dragLines1 = [];
            dragLines2 = [];
            for(var i = 0 ; i < lineObjs.length ; i++){
                var lineObj = lineObjs[i];
                // 将对象移动到鼠标位置
                if(lineObj.obj1.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj1.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines1.push(lineObj);
                }else if(lineObj.obj2.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj2.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines2.push(lineObj);
                }
            }
            // 使对象允许拖拽
            if(e.which!=3){
                isDragging = true;
            }

            //更新显示
            drawCircles();
            chooseObjInitPlace.x = circle.x;
            chooseObjInitPlace.y = circle.y;
            //停止搜索
            return;
        }else{
            previousSelectedCircle = null;
            canvasTuoLevel = 0;
            chooseObjInitPlace = {};
        }
    }
    
    
    for(var i = 0 ; i < circles2.length; i++) {
        var circle = circles2[i];
        initDomPlace(circles2 , i);
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
           
            if(circle.text !=null){
                isChooseOneObj = false;
            }
        }

        // 判断这个点是否在对象中
        if(isChooseOneObj){
            // 清除之前选择的对象
            previousSelectedCircle = circle;
            canvasTuoLevel = previousSelectedCircle.level;
            dragLines1 = [];
            dragLines2 = [];
            for(var i = 0 ; i < lineObjs.length ; i++){
                var lineObj = lineObjs[i];
                // 将对象移动到鼠标位置
                if(lineObj.obj1.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj1.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines1.push(lineObj);
                }else if(lineObj.obj2.x == previousSelectedCircle.x + previousSelectedCircle.width/2 && lineObj.obj2.y == previousSelectedCircle.y + previousSelectedCircle.height/2){
                    dragLines2.push(lineObj);
                }
            }
            // 使对象允许拖拽
            if(e.which!=3){
                isDragging = true;
            }

            //更新显示
            drawCircles();
            chooseObjInitPlace.x = circle.x;
            chooseObjInitPlace.y = circle.y;
            //停止搜索
            return;
        }else{
            previousSelectedCircle = null;
            canvasTuoLevel = 0;
            chooseObjInitPlace = {};
        }
    }
}
/**
 *	点击画布的时候 记录一下原有元素的位置 用于连线
 *	是否需要记录点击元素的原有位置 暂未使用
 */
function initDomPlace(circles2 , index){
    oldCircles = new Array();
    for(var i = 0 ; i < circles.length ; i++){
        if(i == index){
            continue;
        }
        var circleObj = {};
        circleObj.x = circles[i].x;
        circleObj.y = circles[i].y;
        circleObj.img = circles[i].img;
        circleObj.width = circles[i].width;
        circleObj.height = circles[i].height;
        circleObj.id = circles[i].id;
        oldCircles.push(circleObj);
    }
    for(var j = 0 ; j < circles2.length ; j++){
        if(j == index){
            continue;
        }
        var circleObj2 = {};
        circleObj2.x = circles2[j].x;
        circleObj2.y = circles2[j].y;
        circleObj2.img = circles2[j].img;
        circleObj2.width = circles2[j].width;
        circleObj2.height = circles2[j].height;
        circleObj2.id = circles2[j].id;
        if(circles2[j].tId){
            circleObj2.tId = circles2[j].tId;
        }
        if(circles2[j].app){
            circleObj2.app = circles2[j].app;
        }
        oldCircles2.push(circleObj2);
    }
}
/**
 *	停止拖拽的时候触发的事件
 *	查看拖拽的元素 放开的时候 是否在某个一级中 如果在的话 触发事件 新增一个二级元素 并且在固定位置
 */
function outMouseDragging(e){
    isDragging = false;
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    drawCircles();
    var isChooseOneObj = false;
    if(previousSelectedCircle == null){
        return;
    }else{
    	if(e.which==3){
    		return;
    	}else{
	    	if(circles2.length==0){
				circles2.push(previousSelectedCircle);
	    	}else{
	    		var ids2=[];
		    	for(var cc=0;cc<circles2.length;cc++){
		    		ids2.push(circles2[cc].tId);
		    	}
	    		var preIndex=$.inArray(previousSelectedCircle.tId, ids2)
	    		if(preIndex==-1){
	    			circles2.push(previousSelectedCircle);
	    		}
	    	}
    	}
    }
}
/**
 *	新增一个一级元素
 */
function addCanvasLevel1(index , count){
   
}
/**
 *	新增一个二级元素
 */
function addCanvasLevel2(index , funs){
   
}
/**
 *	新增一个三级元素
 */
function addCanvasLevel3(index , funs){
   
}
/**
 *	新增一个四级元素 放到某三级中
 *	obj1 四级元素的信息
 *	obj2 三级元素
 */
function addCanvasLevel4(obj1 , obj2){
   
}
/**
 * 拖拽元素
 */
function dragCircle(e) {
    // 判断对象是否开始拖拽
    if (isDragging == true) {
    	$("#bottom2").hide();
        // 判断拖拽对象是否存在
        if (previousSelectedCircle != null) {
            // 取得鼠标位置
            var x = e.pageX - canvas.offsetLeft;
            var y = e.pageY - canvas.offsetTop;
            // 将对象移动到鼠标位置
        //  circles2.push(previousSelectedCircle);
            previousSelectedCircle.x = x - previousSelectedCircle.width/2;
            previousSelectedCircle.y = y - previousSelectedCircle.height/2;
            for(var i = 0 ; i < dragLines1.length ; i++){
                dragLines1[i].obj1.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines1[i].obj1.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            for(var i = 0 ; i < dragLines2.length ; i++){
                dragLines2[i].obj2.x = previousSelectedCircle.x + previousSelectedCircle.width/2;
                dragLines2[i].obj2.y = previousSelectedCircle.y + previousSelectedCircle.height/2;
            }
            // 更新画布
            drawCircles();
        }
    }
}

/**
 *	画线 共通算法 包括拖拽跟随也是这个
 */
function DrawLine(obj1Place , obj2Place , count ,  ctx){
    var xDiff = obj1Place.x - obj2Place.x;
    var yDiff = obj1Place.y - obj2Place.y;
    xDiff = Math.abs(xDiff);//x差绝对值
    yDiff = Math.abs(yDiff);//y差绝对值
    var line1End = {};//第一条线的结束点
    var line2Start = {};//第二条线的开始点
    var textPlace = {};
    //分为四种情况
    if(obj1Place.x >= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x >= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x - xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x - xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x - xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y >= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y - yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y - yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y - yDiff * 1 / 10;
    }else if(obj1Place.x <= obj2Place.x && obj1Place.y <= obj2Place.y){
        line2Start.x = obj1Place.x + xDiff * 3 / 5;
        line2Start.y = obj1Place.y + yDiff * 3 / 5;

        line1End.x = obj1Place.x + xDiff * 2 / 5;
        line1End.y = obj1Place.y + yDiff * 2 / 5;

        textPlace.x = line1End.x + xDiff * 1 / 10;
        textPlace.y = line1End.y + yDiff * 1 / 10;
    }
    context.beginPath();
    context.setLineDash([10,5])
    context.fillStyle='black';
    //设置对象起始点和终点
    context.moveTo(obj1Place.x,obj1Place.y);
    context.lineTo(obj2Place.x,obj2Place.y);
    var curX=textPlace.x;
    var curY=textPlace.y;
    
    
    
    //设置样式
   context.lineWidth = 2;
    context.strokeStyle = "#C5C5C5";
    context.stroke();
    
    

    context.beginPath();
    context.fillStyle='#C5C5C5';
    context.strokeStyle = "#C5C5C5";

    context.ellipse(curX+2,curY-3,8,8,0,0,Math.PI*2);
	context.closePath();
    context.fill();
    context.stroke();
    
    context.beginPath();
    context.fillStyle='#FFFFFF';

    context.fillText(count, curX-2, curY+2)
    context.fill();
    context.stroke();
}

/**
 *	十字连线的时候的方法
 */
function DrawLine2(obj , ctx){
    context.beginPath();

    ctx.setLineDash([5,5])
    ctx.fillStyle='black';
    //设置对象起始点和终点
    ctx.moveTo(obj.startx,obj.starty);
    ctx.lineTo(obj.endx,obj.endy);
    //设置样式
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#F5270B";
    //绘制
    ctx.stroke();
}
/**
 *	增加或取消连线的数据
 */
function addLineOrCancel(obj1 , obj2 , count , funs){
    var isLine = true;
    var lineIndex = -1;
    var param;
    if(funs&&funs.param){
    	param = funs.param;
    }
    for(var i = 0 ; i < lineObjs.length ; i++){
        var lineObj = lineObjs[i];
        if(lineObj.obj1.x == obj1.x && lineObj.obj1.y == obj1.y && lineObj.obj2.x == obj2.x && lineObj.obj2.y == obj2.y ){
            //已经连线过 删除这条线 A连B 和 B连A 都要取消
            lineIndex = i;
            break; 
        }else if(lineObj.obj1.x == obj2.x && lineObj.obj1.y == obj2.y && lineObj.obj2.x == obj1.x && lineObj.obj2.y == obj1.y){
            lineIndex = i;
            break;
        }
    }
    if(lineIndex == -1){
        lineObjs.push({obj1:obj1 , obj2:obj2 , count:count,param:param});
        if(funs != null && funs.fun1){
            funs.fun1(obj1 , obj2);
        }
    }else{
        if(previousSelectedCircleStartLine != null){
            //已经连线过
            alert("这两个元素已经连线了!")
            return;
        }
        var newLines = new Array();
        for(var i = 0 ; i < lineObjs.length ; i++){
            var lineObj = lineObjs[i];
            if(i != lineIndex){
                // 删除这条线
                var newLine = {obj1:lineObj.obj1 , obj2:lineObj.obj2 , count:lineObj.count,param:lineObj.param};
                newLines.push(newLine);
            }
        }
        lineObjs = newLines;
        if(funs != null && funs.fun2){
            funs.fun2(obj1 , obj2);
        }
    }
}
/**
 *	两个元素中的中心进行连线
 *	obj1 : 	拖拽的元素
 *	obj2:	被动链接的元素
 */
function doLine(obj1 , obj2 ,count , funs){
   
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2;
    obj1Place.y = obj1.y + obj1.height / 2;
    obj1Place.id = obj1.tId;
    obj1Place.app = obj1;
    obj2Place.x = obj2.x + obj2.width / 2;
    obj2Place.y = obj2.y + obj2.height / 2;
    obj2Place.app = obj2;
    obj2Place.id = obj2.tId;

    addLineOrCancel(obj1Place , obj2Place , count ,funs);
}

/**
 *	画线  重置点击 拖拽事件
 */
function setDrawLine(cursorstyle, fun1 , fun2 , obj) {
    var clicktype = obj.attr('clicktype');
    if(clicktype == "1"){
        //想要连线
        obj.attr('clicktype','2');
        if (document.getElementById('myCanvas').style) {
            document.getElementById('myCanvas').style.cursor='cursorstyle';
        }
        var funObj = {fun1:fun1,fun2:fun2};
        $(canvas).unbind('mousedown').bind('mousedown', canvasLineClick);
        $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseLineDragging);
        $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseLineDragging);
        $(canvas).unbind('mousemove').bind('mousemove' , dragLineCircle);
    }else{
        //点完连线后不想连线了
        cancelDrawLine(obj);
    }
}
/**
 *	连上线了之后 重置拖拽事件
 */
function cancelDrawLine(obj){
    if (document.getElementById('myCanvas').style) {
        document.getElementById('myCanvas').style.cursor='pointer';
    }
    var funObj = {fun1:canvasInitData.fun1,fun2:canvasInitData.fun2};
    $(canvas).unbind('mousedown').bind('mousedown', canvasClick);
    $(canvas).bind('mousedown',funObj, canvasLevel3Click);
    $(canvas).unbind('mouseup').bind('mouseup' , funObj , outMouseDragging);
    $(canvas).unbind('mouseout').bind('mouseout' , funObj , outMouseDragging);
    $(canvas).unbind('mousemove').bind('mousemove' , dragCircle);
	if (document.getElementById('addLine').getAttribute('clickType')=="2") {
        document.getElementById('addLine').setAttribute('clickType',1);
    }
	
	
}

/**
 *	画线的时候 点击画布 查找有无选中的对象
 *
 */
function canvasLineClick(e) {
	$("#bottom2").hide();
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < circles2.length; i++) {
        var circle = circles2[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleStartLine = circle;
            initDomPlace(circles2,i);
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){

    }else{
        previousSelectedCircleStartLine = null;
        alert("未选中一个对象!");
    }
}
/**
 *	画线的时候 松开鼠标的时候看看有没有元素选中 有的话 连线
 */
function outMouseLineDragging(e){
    // 取得画布上被单击的点
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    // 查找被单击的對象
    var isChooseOneObj = false;
    for(var i = 0 ; i < oldCircles2.length; i++) {
        var circle = oldCircles2[i];
        if(clickX >= circle.x && clickX <= circle.x + circle.width && clickY >= circle.y && clickY <= circle.y + circle.height){
            //选中了这个元素
            isChooseOneObj = true;
            previousSelectedCircleEndLine = circle;
            break;
        }
    }
    // 判断这个点是否在对象中
    if(isChooseOneObj){
        //放开鼠标的时候 也有元素 让这两个元素 连线
        doLine(previousSelectedCircleStartLine , previousSelectedCircleEndLine , 0 ,e.data);
        previousSelectedCircleStartLine = null;
        drawLineObj = {};
        drawCircles();
        cancelDrawLine();
    }else{
        if(previousSelectedCircleStartLine != null){
            previousSelectedCircleStartLine = null;
            drawLineObj = {};
            drawCircles();
            alert("未选中一个对象!");
        }
    }
}
var drawLineObj = {};
/**
 *	画线
 */
function dragLineCircle(e){
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    // 判断拖拽对象是否存在
    if (previousSelectedCircleStartLine != null) {
        // 	取得鼠标位置
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        //	画一条线 起点是选中元素的中心 终点是鼠标的位置
        drawLineObj.startx = previousSelectedCircleStartLine.x + previousSelectedCircleStartLine.width/2;
        drawLineObj.starty = previousSelectedCircleStartLine.y + previousSelectedCircleStartLine.height/2;
        drawLineObj.endx = clickX;
        drawLineObj.endy = clickY;

        // 更新画布
        drawCircles();
    }
}